<template>
  <view class="list">
    <my-goods @click.native='toDetail(item.goods_id)' :item=item v-for="(item,index) in dataList" :key="index">
    </my-goods>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isLoading: false,
        dataList: [],
        key: '',
        pagenum: 1,
        pagesize: 10,
        total: -1,
        defualtImg: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
      };
    },
    onLoad(options) {
      this.key = options.key
      this.getData()
    },
    methods: {
      //跳转
      toDetail(goods_id) {
        uni.navigateTo({
          url: `/pages/goods_detail/main?goods_id=${goods_id}`
        })
      },
      async getData(bool) {
        if (this.dataList.length === this.total) {
          return uni.showToast({
            title: "数据加载完毕"
          })
        }
        this.isLoading = true
        let {
          data: res
        } = await uni.$http.get(
          `/api/public/v1/goods/search?query=${this.key}&pagenum=${this.pagenum}&pagesize=${this.pagesize}`)
        if (res.meta.status !== 200) return uni.$showMsg()
        this.total = res.message.total
        // this.dataList = res.message.goods
        this.dataList = [...this.dataList, ...res.message.goods]
        this.isLoading = false
        if (bool) {
          uni.stopPullDownRefresh()
        }
      }
    },
    onPullDownRefresh() {
      this.dataList = []
      this.pagenum = 1
      this.total = -1
      this.isLoading = false
      this.getData(true)
    },
    onReachBottom() {
      if (this.isLoading) return
      this.pagenum += 1
      this.getData()
    }
  }
</script>

<style lang="scss">
  .list {
    .item {
      display: flex;
      padding: 40rpx 20rpx;
      border-bottom: 1px solid #ccc;

      .left {
        image {
          margin-right: 20rpx;
          width: 200rpx;
          height: 200rpx;
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
          font-size: 12px
        }

        .price {
          font-size: 14px;
          color: #c00000;
        }
      }
    }
  }
</style>
